<template>
  <div>
    <el-calendar v-model="searchModel.dutyDate">
      <template #header>
        <div></div>
      </template>
      <template #date-cell="{ data }">
        <div class="calendar-component">
          <div class="calendar-day">
            <div></div>
            <div class="aa">{{ data.day.slice(-2) }}</div>
          </div>
          <p
            v-if="table.includes(data.day)"
            class="holiday"
            @click="calendarBtn(data)"
          >
            已排班
          </p>
          <el-button
            type="primary"
            v-else
            class="submit-btns"
            @click="calendarBtn2(data)"
          >
            <img class="icon-img" :src="iconTypesetting" alt="" />
          </el-button>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script setup>
import { reactive, ref, watch, defineProps } from "vue";
import iconTypesetting from "@/assets/image/typesetting.png";
// const emits = defineEmits(["table"]);
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  table: {
    type: Object,
    default: () => {},
  },
  searchModel: {
    type: Object,
    default: () => {
      return { dutyDate: new Date() };
    },
  },
});

// 已排版
const calendarBtn = (val) => {
  let data = val.date;
  let dayOfWeek = new Date(data).getDay();
  const daysOfWeek = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const dayName = daysOfWeek[dayOfWeek];
  const list = {
    week: dayName,
    date: val.day,
    teamId: props.searchModel.teamId,
  };
  router.push({
    path: "/road/duty/scheduling/edit",
    query: {
      id: encodeURIComponent(JSON.stringify(list)),
    },
  });
};

// 无排版
const calendarBtn2 = (val) => {
  let data = val.date;
  let dayOfWeek = new Date(data).getDay();
  const daysOfWeek = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const dayName = daysOfWeek[dayOfWeek];
  const list = {
    week: dayName,
    date: val.day,
    teamId: props.searchModel.teamId,
  };
  router.push({
    path: "/road/duty/scheduling/add",
    query: {
      id: encodeURIComponent(JSON.stringify(list)),
    },
  });
};

// const value = ref(new Date());

// watch(value, (newValue) => {
//   console.log("value ===>", value);
//   console.log("newValue ===>", newValue);
// });
</script>
<style lang="less" scoped>
::v-deep(.el-calendar__header) {
  border-bottom: 0;
  padding: 0;
}

::v-deep(.el-calendar__body) {
  border-radius: 13px;
  border: 2px solid #dcdcdc;
}

::v-deep(.el-calendar-table .el-calendar-day) {
  height: 120px;
  padding-top: 20px;
}

.calendar-component {
  text-align: center;
}

.calendar-day {
  display: flex;
  justify-content: space-between;
}

.holiday {
  width: 80%;
  margin: 0 auto;
  padding: 7px 0;
  background: #2986ff;
  border-radius: 5px;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  margin-top: 20px;
}

.submit-btns {
  width: 80%;
  margin: 0 auto;
  padding: 18px 0;
  background: #2986ff;
  border-radius: 5px;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  margin-top: 20px;
  opacity: 0;

  &:hover {
    opacity: 1;
  }
}

.icon-img {
  width: 31px;
  height: 31px;
}
</style>